<template>
    <n-modal
        :mask-closable="false"
        :close-on-esc="false"
        :title="title"
        :show="show"
        preset="card"
        @close="close"
        :on-after-enter="init"
        :on-after-leave="destroy"
        style="width: 600px;"
    >
        <n-form
            label-width="auto"
            label-placement="left"
        >
            <n-form-item label="码" show-require-mark>
                <n-input v-model:value="form.code"/>
            </n-form-item>
            <n-form-item label="名称">
                <n-input v-model:value="form.name"/>
            </n-form-item>
            <n-form-item label="值" show-require-mark>
                <n-input v-model:value="form.value"/>
            </n-form-item>
            <n-form-item label="状态" show-require-mark>
                <n-radio-group v-model:value="form.status">
                    <n-radio :label="item.name" :value="item.value" v-for="item in codeStore.getDict(Dict.Status)"/>
                </n-radio-group>
            </n-form-item>
            <n-form-item label="备注">
                <n-input type="textarea" v-model:value="form.remark"/>
            </n-form-item>
        </n-form>
        <template #footer>
            <n-space justify="end">
                <n-button type="info" @click="handleConfirmOnClick">确认</n-button>
                <n-button @click="close">关闭</n-button>
            </n-space>
        </template>
    </n-modal>
</template>
<script lang="ts" setup>
import { reactive, toRefs, PropType } from 'vue'
import { getParam, postOrPutParam } from '@/api/system/param'
import { IMessage } from '@/utils/message'
import { useCodeStore } from '@/store/modules/code'
import { Dict } from '@/enums'

const codeStore = useCodeStore()

const state = reactive({
    form: {} as Param
})

const {
    form
} = toRefs(state)

const props = defineProps({
    title: {
        type: String
    },
    show: {
        type: Boolean
    },
    row: {
        type: Object as PropType<Param>,
        required: true
    }
})

const emits = defineEmits<{
    (e: 'handleCloseOnClick'): void,
    (e: 'handleSelectOnClick'): void
}>()

const init = async () => {
    if(Object.keys(props.row).length == 0) return
    const { data } = await getParam(props.row.id)
    state.form = data
}

const handleConfirmOnClick = async () => {
    const { message } = await postOrPutParam(state.form)
    IMessage({ content: message })
    select()
    close()
}

const select = () => {
    emits('handleSelectOnClick')
}

function close(){
    emits('handleCloseOnClick')
}

function destroy(){
    state.form = {} as Param
}

</script>